<template>
  <view>
    <view class="btn-wrapper">
      <button class="cu-btn primary" @click="handleListClick">申请记录</button>
    </view>
    <form>
      <view class="cu-form-group">
        <view class="title">开始日期</view>
        <picker mode="date" :value="form.start" @change="DateChange1">
          <view class="picker">
            {{ form.start }}
          </view>
        </picker>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title">结束日期</view>
        <picker mode="date" :value="form.end" @change="DateChange2">
          <view class="picker">
            {{ form.end }}
          </view>
        </picker>
      </view>
      <view class="cu-form-group label margin-top">
        <view class="title">请假理由</view>
      </view>
      <view class="cu-form-group ta">
        <textarea maxlength="-1" class="input" v-model="form.cause" placeholder="请输入内容"></textarea>
      </view>
    </form>

    <view class="btn" @click="handlePost">提交</view>
  </view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  name: "ask-leave",
  data() {
    return {
      type: null,
      form: {
        start: '',
        end: '',
        cause: '',
      },
    }
  },
  methods: {
    handleListClick(){
      uni.navigateTo({url:"/pages/index/my/technician/ask-leave/list"})
    },
    DateChange1(e) {
      this.form.start = e.detail.value
    },
    DateChange2(e) {
      this.form.end = e.detail.value
    },
    handlePost() {
      Api.leave(this.form).then(res => {
        this.$toast("提交成功，请联系店长进行审核。")
      })
    },
  },

}
</script>

<style scoped lang='scss'>
.picker {
  height: r(100px);
}

.btn-wrapper {
  text-align: right;

  .primary {
    color: $primary-color;
    background-color: transparent;
  }
}

.label {
  //padding-bottom: r(10px);
  min-height: r(50px);
}

.ta {
  border-top: 0;

  .input {
    margin-top: 0;
  }
}

.btn {
  background-color: $primary-color;
  border-radius: r(10px);
  color: white;
  text-align: center;
  padding: r(20px 0);
  margin: r(24px);
}
</style>